<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--浏览器兼容性-->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--viewport为了确保适当的绘制和触屏缩放。user-scalable=no禁用缩放功能后，
    用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。-->
    <title>Balabala视频</title>
    <link rel="stylesheet" href="./css/bootstrapcss.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="icon" type="image/x-icon" href="./images/logo.png" />
    <script src="./js/jquery-1.9.1.js"></script>
    <script src="./js/bootstrap.min.js "></script>
    <!--wow.min.js和animate.css组合使用-->
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top ">
        <!--导航条 默认导航条  固定在顶部-->
        <div class="container ">
            <!--小屏幕导航以及Logo-->
            <div class="navbar-header ">
                <button class="navbar-toggle " data-toggle="collapse " data-target=".navbar-collapse ">
                    <!--class="navbar-toggle 进行隐藏和显示之间的切换-->
                    <!--  toggle触发器   data-toggle="collapse"  与data-target使用折叠插件
    .data -target属性接受一个CSS选择器，并会对其应用折叠效果。-->
                    <!--三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.html" class="navbar-brand"><img src="./images/logoindex.png" alt="" class="logoimage"></a>
            </div>
            <!--小屏幕导航以及Logo-->
            <!--导航-->

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <!--navbar-right 向右对齐导航栏中的组件。-->
                    <li><a href="#home">推荐</a></li>
                    <li><a href="#bbs">高分电影</a></li>
                    <li><a href="#people">电视剧</a></li>
                    <li><a href="#course">最新电影</a></li>
                    <li><a href="#contact">网站留言</a></li>
                    <li><a href="./Collection.html" target="_blank">收藏</a></li>
                    <li><a href="./myself.html" target="_blank">个人中心</a></li>
                </ul>
            </div>
            <!--导航-->
        </div>
    </nav>





    <!-- 这里设置首页轮播 -->

    <div class="container">
        <br>
        <br>
        <div class="row">
            <div class="col-md-12">
                <!-- data-interval 设置轮播间隔时间 -->
                <div class="carousel slide" id="carousel-example-generic" data-ride="carousel" data-interval="1700">
                    <!-- 小圆点 -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="4"></li>
                    </ol>
                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="./images/飞驰人生.jpeg" class="lbimg">
                        </div>
                        <div class="item">
                            <img src="./images/釜山行2.jpeg" class="lbimg">
                        </div>
                        <div class="item">
                            <img src="./images/我不是药神.jpg" class="lbimg">
                        </div>
                        <div class="item">
                            <img src="./images/紧急救援2.jpeg" class="lbimg">
                        </div>
                        <div class="item">
                            <img src="./images/金刚川.jpg" class="lbimg">
                        </div>
                    </div>
                    <!-- 左右换图按钮 -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>



    <!--home-->
    <section id="home">
        <div class="container">
            <div class="row wow fadeInDown" data-wow-duration="1s">
                <div class="col-md-12">
                    <h3>推荐</h3>
                </div>
                <div id="box" class="carousel slide" data-ride="carousel">
                    <div class="col-md-3">
                        <a href="https://www.iqiyi.com/v_19rqy4kans.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01" target="_blank"><img src="./images/飞驰人生2.jpg" class="img-responsive"></a>
                        <p>飞驰人生</p>
                    </div>
                    <div class="col-md-3">
                        <a href="https://www.iqiyi.com/v_19rr7plcfw.html" target="_blank"><img src="./images/八佰.jpg" class="img-responsive"></a>
                        <p>八佰</p>
                    </div>
                    <div class="col-md-3">
                        <a href="https://www.iqiyi.com/v_19rsho7kz8.html" target="_blank"><img src="./images/中国机长.jpg" class="img-responsive"></a>
                        <p>中国机长</p>
                    </div>
                    <div class="col-md-3"><img src="./images/流浪地球.jpg" class="img-responsive">
                        <p>流浪地球</p>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
    <!--bbs-->
    <section id="bbs">

        <div class="container">
            <div class="row wow swing">
                <h3>高分电影</h3>
                <div class="col-md-4">
                    <a href="https://baike.sogou.com/v100398809.htm" alt="" target="_blank">
                        <img src="./images/战狼2.jpg" class="img-responsive" alt="">
                        <p>战狼2 </p>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="https://baike.sogou.com/v100398809.htm" alt="" target="_blank">
                        <img src="images/1917.jpg" class="img-responsive" alt="">
                        <p>1917 </p>
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="https://baike.sogou.com/v100398809.htm" alt="" target="_blank">
                        <img src="images/寄生虫.jpg" class="img-responsive" alt="">
                        <p>寄生虫</p>
                    </a>
                </div>
            </div>
        </div>

    </section>
    <!--bbs-->

    <!--people-->
    <section id="people">
        <div class="container">
            <div class="col-md-4 wow rotateIn">
                <img src="images/王国1.jpeg" class="img" alt="战狼">
            </div>
            <div class="col-md-8 wow fadeInLeft">
                <h2>王国</h2>
                <p><span class="glyphicon glyphicon-bell detail"></span>《王国》是由金成勋执导，金恩熙编剧，朱智勋、裴斗娜、柳承龙主演的韩国僵尸题材古装剧，于2019年1月25日在Netflix播出
                </p>
                <p><span class="glyphicon glyphicon-bell detail"></span>在一个充斥着贪腐和饥荒的王国中，关于国王死亡的神秘传闻沸沸扬扬，同时一场奇怪的瘟疫传播开来，感染者可获得不死之身并嗜食人肉。成为阴谋牺牲品的世子开始踏上揭露邪恶阴谋，拯救子民的征程。
                </p>
            </div>

        </div>
    </section>
    <!--people-->



    <section id="course">
        <div class="container">
            <div class="row wow wobble">
                <div class="col-md-12">
                    <h2>最新电影</h2>
                </div>
                <div class="col-md-3">
                    <div class="course" align="center">
                        <!--让图片与按钮居中-->
                        <img src="./images/铁雨.jpg" class="img-responsive" alt="">
                        <a href="https://www.bilibili.com/video/BV19D4y1X79f" class="btn btn-primary" target="_blank" role="button">
                            <!--.btn	为按钮添加基本样式  .btn-primary	原始按钮样式（未被操作）-->
                            <!--role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色。增强组件的可访问性、可用性和可交互性-->
                            铁雨
                        </a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course" align="center">
                        <img src="images/拆弹专家.jpg" class="img-responsive" alt="">
                        <a href="https://www.bilibili.com/video/BV1ea4y1W7kF" class="btn btn-primary" target="_blank" role="button">
                            拆弹专家
                        </a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course" align="center">
                        <img src="images/孟买酒店.jpg" class="img-responsive" alt="">
                        <a href="https://neets.cc/detail/B8AJtV6ctxTTvTkTA2APNo" class="btn btn-primary" target="_blank" role="button">
                            孟买酒店
                        </a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course" align="center">
                        <img src="images/头文字d.jpg" class="img-responsive" alt="">
                        <a href="https://www.bilibili.com/video/BV1Yt411B7S6" class="btn btn-primary" target="_blank" role="button">
                            头文字D
                        </a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course" align="center">
                        <img src="images/火星救援.jpg" class="img-responsive" alt="">
                        <a href="https://www.bilibili.com/video/BV1zy4y167cX" class="btn btn-primary" target="_blank" role="button">
                            火星救援
                        </a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course" align="center">
                        <img src="images/悟空传.jpg" class="img-responsive" alt="">
                        <a href="https://www.bilibili.com/video/BV13t4y1k7q9" class="btn btn-primary" target="_blank" role="button">
                            悟空传
                        </a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course" align="center">
                        <img src="images/少年.jpg" class="img-responsive" alt="">
                        <a href="https://www.bilibili.com/video/BV1sV411h7Yz" class="btn btn-primary" target="_blank" role="button">
                            少年
                        </a>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="course" align="center">
                        <img src="images/我的特工爷爷.jpg" class="img-responsive" alt="">
                        <a href="https://live.bilibili.com/4766933" class="btn btn-primary" target="_blank" role="button">
                            我的特工爷爷
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </section>


    <!--contact-->
    <section id="contact">
        <div class="lvjing">
            <div class="container">
                <div class="row">
                    <div class="col-md-6  wow fadeInLeft">
                        <h2>
                            <span class="glyphicon glyphicon-send"></span> &nbsp; Balabala视频
                        </h2>
                        <p>
                            如果你有什么建议一定要在右方留言提议！你的不经意的举动,对于任何需要帮助的人都是恩情。万分感谢！
                        </p>
                        <address>
                                <p>
                                    <span class="glyphicon glyphicon-home"></span>
                                    &nbsp;
                                    地址:湖南交通职业技术学院
                                </p>
                                <p>
                                    <span class="glyphicon glyphicon-phone-alt"></span>
                                    &nbsp;
                                    联系电话：4008208820
                                </p>
                                <p>
                                    <span class="glyphicon glyphicon-envelope"></span>
                                    &nbsp;
                                    邮箱:1501110991@qq.com
                            </address>
                    </div>
                    <div class="col-md-6  wow fadeInRight">
                        <form action="#" method="post" role="form">
                            <div class="col-md-6">
                                <input type="text" class="form-control" placeholder="您的姓名" />
                            </div>
                            <div class="col-md-6">
                                <input type="email" class="form-control" placeholder="您的邮箱" />
                            </div>
                            <div class="col-md-12">
                                <textarea class="form-control" placeholder="请对我们的网站提出建议，也可留下您想看的电影" rows="4"></textarea>
                                <!--想要显示placeholder里面的内容，中间必须不能有内容-->
                            </div>
                            <!--<textarea> 标签定义一个多行的文本框。文本区域中可容纳无限数量的文本
               可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。-->
                            <div class="col-md-8">
                                <input type="submit" class="form-control" value="提交" />
                            </div>
                            <div class="col-md-4">
                                <a href="./call.html"><input type="button" class="form-control" value="联系客服" /></a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--contact-->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p>
                        响应式网站 | 本站由李思鹏小组制作
                    </p>
                </div>
            </div>
        </div>
    </footer>

</body>

</html>